<template>
	<view class="pages">
		<view class="container">
			<com-head textTit="订单物流" :typeVal="1" :scrollTop="scrollTop"></com-head>
			
			<view class="popMain">
				<view class="popMain__view" v-for="item in goodsList">
					<view class="header">
						<view class="name">
							<text v-if="item.logistics_no">
								{{item.logistics_name}}：{{item.logistics_no || '-'}}
								<u-icon class="attach" @click="copyText(item.logistics_no)" name="attach" color="#333333" size="28"></u-icon>
							</text>
						</view>
						<view class="btn">{{item.status == 2 ? '待发货' : '待收货'}}</view>
					</view>
					
					<view class="box" v-for="row in item.goods">
						<view class="box_left"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg6.png"></image></view>
						<view class="box_right">
							<view class="box_right-name">{{row.goods_name}}</view>
							<view class="box_right-num">{{row.sku_text}}</view>
							<view class="box_right-dec">
								<view class="box_right-dec-left"><text>￥</text>{{row.sale_price}}</view>
								<view class="box_right-dec-right">× {{row.number}}</view>
							</view>
						</view>
					</view>
					
					<view class="dec">
						<view class="dec__left">
							<text>实付金额：</text><text class="dec__left-num">¥{{item.orders_payable ? item.orders_payable : item.orders_payable}}</text>
						</view>
						<view class="dec__right">
							<view class="look" v-if="item.status == 3" @click="lookFun(item)">查看物流</view>
							<view class="success" @click="confirmReceipt(item)">确认收货</view>
						</view>
					</view>
					
				</view>
				
				<view class="empty" style="text-align: center; margin-top: 146rpx;" v-if="!goodsList.length">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
					<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">暂无数据</view>
				</view>
				
				<!-- 二维码弹窗 -->
				<u-popup v-model="show" safe-area-inset-bottom mode="bottom" border-radius="40" @close="close">
					<view class="popBox">
						<u-icon class="popBox-close" name="close" color="#666" size="35" @click="close()"></u-icon>
						<view class="popBox-title">物流详情</view>
						
						<view class="popMain">
							<view class="popView" v-for="(item,index) in Traces">
								<view class="popView__l" :class="index == 0 ? 'checkedBg' : ''">
									<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bbb1.png"></image>
								</view>
								<view class="popView__r">
									<view class="popView__r-title" :class="index == 0 ? 'black' : ''">{{statusFun(item.logisticsStatus)}}</view>
									<view>
										<view class="popView__r-time" :class="index == 0 ? 'black' : ''">{{timeTransformation(item.time, 1)}}</view>
										<view class="popView__r-dec" :class="index == 0 ? 'black' : ''">当前位置：{{item.areaName}}</view>
										<view class="popView__r-dec" :class="index == 0 ? 'black' : ''">{{item.desc}}</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</u-popup>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				goodsList: [],
				total:0,
				page:1,
				itemObj: {},
				Traces: [],
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.goodsList.length) {
				this.page++;
				this.getOrders();
			}
		},
		onLoad() {
			this.getOrders()
		},
		methods: {
			statusFun(type){
				switch(type) {
				    case 'WAIT_ACCEPT':
				        return '待揽收';
					case 'ACCEPT':
					    return '已揽收';
					case 'TRANSPORT':
					    return '运输中';
					case 'DELIVERING':
					    return '派件中';
					case 'AGENT_SIGN':
					    return '已代签收';
					case 'SIGN':
					    return '已签收';
					case 'FAILED':
					    return '包裹异常';
				}
			},
			lookFun(item){
				this.itemObj = item
				this.getExpress()
				
			},
			async confirmReceipt(item){
				let {code,data} = await this.$u.api.confirmReceipt({id: item.id});
				if(code){
					this.toast('已完成')
					this.page = 1
					this.goodsList = []
					this.getOrders()
				}
			},
			async getOrders(){
				let {code,data} = await this.$u.api.getOrders({is_logistics: 1, is_market: 1});
				console.log(565, code, data)
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.goodsList = [...this.goodsList, ...data.data];
					this.total = data.total;
					if (this.total <= this.goodsList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			async getExpress(){
				uni.showLoading({
					title: '加载中'
				});
				this.Traces = []
				let {code,data} = await this.$u.api.getExpress({orders_id: this.itemObj.id});
				if(code){
					if (code === 10001) return uni.hideLoading();
					uni.hideLoading();
					if (!data.logisticsTrace) return this.toast('暂无物流信息')
					this.show = true
					data.logisticsTrace.logisticsTraceDetailList.map(item =>{
						this.Traces.unshift(item)
					})
				}
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 50rpx 32rpx;
	}
.pages{
	width: 100%;
	height: 100%;
	background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	background-repeat: no-repeat;
	background-size: cover;
	
	.container {
		overflow-y: scroll;
		height: 100%;
		
	}
}

.popMain{
	margin-top: 20rpx;
	.black{
		color: #333333 !important;
	}
	.mt20{
		margin-top: 32rpx !important;
	}
	.checkedBg{
		background: linear-gradient(135deg, #50DCC2 0%, #007664) !important;
	}
	&__view{
		padding: 32rpx;
		background: white;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		.header{
			display: flex;
			padding-bottom: 32rpx;
			border-bottom: 2rpx dashed #EDEDED;
			.name{
				flex: 1;
				font-size: 24rpx;
				color: #333333;
			}
			.attach{
				// border: 1rpx solid red;
				padding: 15rpx;
				margin-left: 20rpx;
				position: relative;
				top: 0;
			}
			.btn{
				width: 103rpx;
				height: 46rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #007664;
				font-size: 24rpx;
				color: #007664;
				line-height: 46rpx;
				text-align: center;
			}
		}
	}

	.box{
		display: flex;
		padding: 32rpx 0;
		border-bottom: 2rpx dashed #EDEDED;
		&_left{
			image{
				width: 150rpx;
				height: 150rpx;
				background: #D9D9D9;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
		&_right{
			margin-left: 18rpx;
			flex: 1;
			&-name{
				font-size: 28rpx;
				color: #333333;
				// font-weight: bold;
			}
			&-num, &-shop{
				font-size: 24rpx;
				color: #999999;
				margin-top: 23rpx;
			}
			&-dec{
				display: flex;
				margin-top: 22rpx;
				// font-weight: bold;
				&-left{
					font-size: 32rpx;
					color: #007664;
					flex: 1;
					text{
						font-size: 24rpx;
					}
				}
				&-right{
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}
			}
		}
	}
	
	.dec{
		margin-top: 30rpx;
		display: flex;
		&__left{
			font-size: 24rpx;
			color: #999999;
			flex: 1;
			margin-top: 20rpx;
			&-num{
				font-size: 24rpx;
				color: #4D5562;
			}
		}
		&__right{
			display: flex;
			.look{
				width: 127rpx;
				height: 70rpx;
				background: #E7FFFB;
				border-radius: 67rpx 67rpx 67rpx 67rpx;
				border: 2rpx solid #007664;
				font-size: 24rpx;
				color: #007664;
				text-align: center;
				line-height: 70rpx;
			}
			.success{
				width: 127rpx;
				height: 70rpx;
				background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
				border-radius: 67rpx 67rpx 67rpx 67rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
				margin-left: 12rpx;
			}
		}
	}
}

.popBox{
	padding: 80rpx 32rpx;
	position: relative;
	.popMain{
		max-height: 1100rpx;
		overflow-y: scroll;
	}
	.popView{
		display: flex;
		margin-top: 34rpx;
		&__l{
			width: 59rpx;
			height: 59rpx;
			background: #CBCBCB;
			border-radius: 50%;
			margin-right: 23rpx;
			image{
				width: 35rpx;
				height: 35rpx;
				position: relative;
				left: 12rpx;
				top: 10rpx;
			}
		}
		&__r{
			flex: 1;
			// border: 1rpx solid red;
			&-title{
				font-size: 32rpx;
				color: #999999;
			}
			&-time, &-dec{
				font-size: 24rpx;
				color: #999999;
				margin-top: 4rpx;
			}
			&-time{
				margin-top: 12rpx;
			}
		}
	}
	&-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
		display: inline-block;
		// border: 1rpx solid red;
		top: -30rpx;
	}
	&-close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		// border: 1rpx solid red;
	}
}

// jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg99.png

</style>
